<template>
    <div class="app-container">
      <div class="mask">
          <div class="new-project-dialog">
            <h2>新增项目</h2>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

              <el-form-item label="项目名称" prop="deptName">
                <el-input v-model="ruleForm.deptName"></el-input>
              </el-form-item>

              <el-form-item label="项目编号" prop="deptNum">
                <el-input v-model="ruleForm.deptNum"></el-input>
              </el-form-item>

              <el-form-item label="序号" prop="orderNum">
                <el-input v-model="ruleForm.orderNum"></el-input>
              </el-form-item>

              <el-form-item label="当前状态">
                <el-radio-group v-model="ruleForm.status">
                  <el-radio
                    v-for="dict in dict.type.sys_normal_disable"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item style=" margin-right: 100px">
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              </el-form-item>

            </el-form>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import { totalProject, addDept } from "@/api/sop/manage";

  
  export default {
    name: "newProject",
    dicts: ['sys_normal_disable'], // 字典
    data() {
      return {
        centerDialogVisible: true, // 控制新增项目弹窗
        ruleForm: {
          deptName: '',
          deptNum: '',
          orderNum: '',
          parentId: '100',
          status: '0',
        },
        id: '',
        rules: {
          deptName: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
          ],
          deptNum: [
            { required: true, message: '请输入项目编号', trigger: 'blur' },
          ]
        }
      };
    },
    created() {
      this.getTotalProject()
    },
    mounted() {
      
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addDept(this.ruleForm).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.getTotalProject();
                this.resetForm('ruleForm')
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      // 获取项目总数
      getTotalProject() {
        totalProject().then(res =>{
          this.id = res.projectTotal + 1
          this.ruleForm.orderNum = this.id
        })
      },

      resetForm(formName) {
        this.ruleForm = {
          deptId: undefined,
          parentId: '100',
          deptName: undefined,
          deptNum: undefined,
          orderNum: undefined,
          leader: undefined,
          phone: undefined,
          email: undefined,
          status: "0",
        };
        this.$refs[formName].resetFields();
        this.ruleForm.orderNum = this.id
      },

    },
   
  };
</script>

<style scoped>
/* 设置遮罩层 */
.app-container {
  position: relative;
  height: 90vh;
  width: 100%;
  background-color: #f0f2f5;
  overflow: hidden;
}

/* 设置遮罩层 */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 设置遮罩层中的内容 */
.mask-content {
  position: absolute;
  top: 50%;
}

/* 新增项目水平居中box */
.new-project-dialog{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 380px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  z-index: 1000;
}
</style>
  